<template>
    <div class="header-bar">
        <sider-trigger :collapsed="collapsed" icon="md-menu" @on-change="handleCollpasedChange"></sider-trigger>
        <span class="custom-bread-crumb bigTitle">{{ sysName }}</span>
        <custom-bread-crumb show-icon style="margin-left: 30px" :list="breadCrumbList"></custom-bread-crumb>
        <div class="custom-content-con">
            <slot></slot>
        </div>
    </div>
</template>
<script>
import customBreadCrumb from './custom-bread-crumb'
import './header-bar.less'
import siderTrigger from './sider-trigger'
export default {
    name: 'HeaderBar',
    data() {
        return {
            sysName: ''
        }
    },
    components: {
        siderTrigger,
        customBreadCrumb
    },
    props: {
        collapsed: Boolean
    },
    computed: {
        breadCrumbList() {
            return this.$store.state.app.breadCrumbList
        }
    },
    methods: {
        handleCollpasedChange(state) {
            this.$emit('on-coll-change', state)
        }
    },
    created() {
        const childSys = sessionStorage.getItem('childSys')
        this.sysName = JSON.parse(childSys).sys_code
    }
}
</script>
